<template>
  <div>
    <!--插槽中的属性的修饰符.sync会把当前的属性展开成一个事件，相当于写了个@update:isShow，所以直接在子组件中出发“update:isShow”即可-->
    <my-alert :isShow.sync="isShow" ref="alertSuccess">
      <!--v-slot后面的值会让子组件找到具有name属性的插槽，把内容分发进去-->
      <!--作用域：slotProps是子组件的上下文，可以在这里取到子组件内的变量-->
      <template v-slot:title="slotProps">{{ slotProps.title }}</template>
      <template>课程新增成功！</template>
    </my-alert>
    <my-alert :isShow.sync="isShowWarn" myClass="warn" ref="alertWarn">
      <!--v-slot后面的值会让子组件找到具有name属性的插槽，把内容分发进去-->
      <!--作用域：slotProps是子组件的上下文，可以在这里取到子组件内的变量-->
      <template v-slot:title="slotProps">{{ slotProps.title }}</template>
      <template>请输入课程名</template>
    </my-alert>

    <course-add v-model="course" @add-course="addCourse"/>
    <!-- 上面实现的相当于下面这样实现，完成一个不是input元素的组件上双向绑定数据的功能：-->
    <!-- <course-add :value="course" @input="course=$event" @add-course="addCourse"/>-->
    <div><label><input v-model.number="price">
      <button @click="updatePrice">更新价格</button>
    </label></div>
    <course-list :courses="this.courses"/>
    <p>
      <button @click="setGray1">将成功弹框置灰</button>
      <button @click="setGray2">将警告弹框置灰</button>
    </p>
  </div>

</template>

<script>
import Vue from 'vue'
import courseList from "./courseList.vue";
import courseAdd from "./courseAdd.vue";
import MyAlert from "./myAlert.vue";

export default {
  name: "course",
  data() {
    return {
      courses: [{name: '物理', price: '0'}, {name: '数学', price: '0'}],
      course: {},
      isShow: false,
      isShowWarn: false,
      title: '父组件的title',
      price: 0
    }
  },
  components: {
    courseList,
    courseAdd,
    MyAlert
  },
  methods: {
    addCourse() {
      if (this.course.name) {
        this.courses.push(this.course);
        this.course = {}
        this.isShow = true
      } else {
        this.isShowWarn = true;
      }
    },
    updatePrice() {
      this.courses.forEach(course => {
        // 直接给对象添加属性，如果价格不变去更新，则新添加的对象不会显示。
        // course.price = this.price
        // 下面vue定义的set和$set方法可以让价格立即更新。
        Vue.set(course, 'price', this.price)
        // this.$set(course,'price',this.price)
      })
    },
    // this.$refs返回当前组件实例
    setGray1() {
      this.$refs.alertSuccess.setGray()
    },
    setGray2() {
      this.$refs.alertWarn.setGray()
    }
  }
}
</script>

<style scoped>

</style>